﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>注册与登录</title>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/base.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/login.css">

    <style>
        form {
            position: relative;
        }

        #regi-username-error {
            position: absolute;
            top: 13px;
            right: 6px;
            font-size: 14px;
            color: #c33;
        }

        #regi-email-error {
            position: absolute;
            top: 61px;
            right: 6px;
            font-size: 14px;
            color: #c33;
        }

        #regi-password-error {
            position: absolute;
            top: 111px;
            right: 6px;
            font-size: 14px;
            color: #c33;
        }

        #regi-password2-error {
            position: absolute;
            top: 161px;
            right: 6px;
            font-size: 14px;
            color: #c33;
        }

        #login-email-error {
            position: absolute;
            top: 13px;
            right: 6px;
            font-size: 14px;
            color: #c33;
        }

        #login-password-error {
            position: absolute;
            top: 61px;
            right: 6px;
            font-size: 14px;
            color: #c33;
        }
    </style>
</head>
<body>

<div class="wrap" style="">
    <header>
        <img id="logo" src="${pageContext.request.contextPath}/image/logo_b.png">
        <h1>欢迎访问法律援助社区</h1>
    </header>

    <section>
        <ul>
            <li id="registerHeader">注册</li>
            <li id="loginHeader" class="active-header">登录</li>
        </ul>
        <div style="display: none;">
            <%--<#--注册表单-->--%>
            <form id="registerForm">
                <div class="inputs">
                    <input type="text" name="username" id="registerInputUsername" placeholder="姓名">
                    <input type="text" name="email" id="registerInputEmail" placeholder="邮箱">
                    <input type="password" name="password" id="registerInputPassword" placeholder="密码（不少于6位）">
                    <input type="password" name="password2" id="registerInputPassword2" placeholder="确认密码">
                    <span id="regi-username-error"></span>
                    <span id="regi-email-error"></span>
                    <span id="regi-password-error"></span>
                    <span id="regi-password2-error"></span>
                </div>

            </form>
            <button id="registerButton" type="button">注册</button>
        </div>
        <div>
            <%--<#--登陆表单-->--%>
            <form id="loginForm">
                <div class="inputs">
                    <input type="text" name="email" id="loginInputEmail" placeholder="邮箱">

                    <input type="password" name="password" id="loginInputPassword" placeholder="密码">
                    <span id="login-email-error"></span>
                    <span id="login-password-error"></span>
                </div>
                <button id="loginButton" type="button">登录</button>
            </form>
        </div>
    </section>
</div>


<script src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script>
<%--<#--// 登陆注册标签选择处理js-->--%>
<script>
    // 登陆注册标签选择处理
    $(function () {

        var headers = $("section > ul > li");
        var bodies = $("section > div");

        headers.each(function (index, element) {
            $(this).on("click", function () {
                headers.each(function () {
                    $(this).removeClass("active-header");
                });
                $(this).addClass("active-header");

                bodies.each(function () {
                    $(this).css("display", "none");
                });
                bodies.eq(index).css("display", "block");
            });

        });


    });
</script>
<script>
    $(function () {

        /* 注册处理 */
        var registerButton = $("#registerButton");
        var registerForm = $("#registerForm");
        var registerInputUsername = $("#registerInputUsername");
        var registerInputEmail = $("#registerInputEmail");
        var registerInputPassword = $("#registerInputPassword");
        var registerInputPassword2 = $("#registerInputPassword2");

        /*	注册校验*/
        registerInputUsername.blur(function () {
            var value = $(this).val();
            if (value.length < 1 || value.length > 10) {
                $("#regi-username-error").text("用户名长度须在1-10个字符");
            } else {
                $("#regi-username-error").text("");
            }
        });
        registerInputEmail.blur(function () {
            var value = $(this).val();
            if (!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(value)) {
                $("#regi-email-error").text("请输入正确的邮箱");
            } else {
                $("#regi-email-error").text("");
            }
        });
        registerInputPassword.blur(function () {
            var value = $(this).val();
            if (!/[a-zA-Z0-9]{6,10}/.test(value)) {
                $("#regi-password-error").text("密码长度须在6-20个字符");
            } else {
                $("#regi-password-error").text("");
            }
        });
        registerInputPassword2.blur(function () {
            var value = $(registerInputPassword).val();
            var value2 = $(registerInputPassword2).val();
            if (value !== value2) {
                $("#regi-password2-error").text("两次输入的密码不一致");
            } else {
                $("#regi-password2-error").text("");
            }
        });

        /* 注册处理 */
        registerButton.on("click", function () {
            var form = new FormData();
            form.append("username", registerInputUsername.val());
            form.append("email", registerInputEmail.val());
            form.append("password", registerInputPassword.val());
            $.ajax({
                url: "${pageContext.request.contextPath}/register",
                type: "post",
                data: form,
                processData: false,
                contentType: false,
                success: function (response) {
                    if (response.state === 0) {
                        alert(response.message);
                        registerInputUsername.val("");
                        registerInputEmail.val("");
                        registerInputPassword.val("");
                        registerInputPassword2.val("");
                        $("#loginHeader").click();
                    } else if (response.state === 1) {
                        $("#regi-username-error").text(response.data["regi-username-error"]);
                        $("#regi-email-error").text(response.data["regi-email-error"]);
                        $("#regi-password-error").text(response.data["regi-passwor-error"]);
                    }
                }
            });
        });


        /* 登录 */
        var loginButton = $("#loginButton");
        var loginForm = $("#loginForm");
        var loginInputEmail = $("#loginInputEmail");
        var loginInputPassword = $("#loginInputPassword");

        /* 登录处理 */
        loginButton.click(function () {
            $.ajax("${pageContext.request.contextPath}/loginCheck",{
                type: "POST",
                data: {"email":loginInputEmail.val(),"password":loginInputPassword.val()},
                success: function (response) {
                    if (response.state === 1) {
                        //设置cookie
                        $.cookie('id', response.data.user.id, { expires: 30, path:'/' });
                        $.cookie('name', response.data.user.name, { expires: 30, path:'/' });
                        $.cookie('role', response.data.user.role, { expires: 30, path:'/' });
                        $.cookie('email', response.data.user.email, { expires: 30, path:'/' });
                        $.cookie('avatar_url', response.data.user.avatarUrl, { expires: 30, path:'/' });
                        $.cookie('sim_desc', response.data.user.simpDesc, { expires: 30, path:'/' });
                        window.location.href = "${pageContext.request.contextPath}/index";
                    } else if (response.state === 0) {
                        alert('提示：' + response.message);
                        $("#login-password-error").text(response.message);
                    }
                }
            });
        });

    });
</script>

</body>
</html>






